<template>
  <div class="computedStudy">
    <h4>numsArr数组的长度：{{ numsLength }}</h4>
    <el-input v-model="personObj.userName"></el-input>
    <el-input v-model="personObj.passWord"></el-input>
    <el-input v-model="personObj.allName"></el-input>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from "vue";
let personObj = reactive({
  userName: "111",
  passWord: "222"
});

let numsArr = reactive([1, 2, 3, 4, 5]);
let numsLength = computed(() => {
  return numsArr.reduce((item, total) => {
    return (total += item);
  }, 0);
});
//allName是计算属性：它是基于userName和passWord的变化而变化的
personObj.allName = computed({
  set(val) {
    const nameArr = val.split("-");
    personObj.userName = nameArr[0];
    personObj.passWord = nameArr[1];
  },
  get() {
    return personObj.userName + "-" + personObj.passWord;
  }
});
</script>
